﻿@model NetSurveillance.WebApp.DataServices.Models.SetupWizard
@{
    ViewBag.Title = Resources.MenuResource.SetupWizard_NetAccessType;
    Layout = "~/Views/Shared/_SetupWizardLayout.cshtml";
}
@using (Html.BeginForm())
{
    <div class="setup02_content_left">
        <dl class="setup02_content_left01">
            <dt>在线监控</dt>
            <dd>
                <ul>
                    <li>
                        <label>
                            @Html.RadioButton("LineType", "ytw", new {id = "rdo_ytw"})
                            @Resources.ViewResource.SetupWizard_NetAccessType_YTW
                        </label>
                    </li>
                    <li>
                        <label>
                            @Html.RadioButton("LineType", "adsl", new {id = "rdo_adsl"})
                            @Resources.ViewResource.SetupWizard_NetAccessType_ADSL
                        </label>
                    </li>
                    <li>
                        <label>
                            @Html.RadioButton("LineType", "wifi", new { id = "rdo_wifi", disabled = "disabled" })
                            @Resources.ViewResource.SetupWizard_NetAccessType_Wifi
                        </label>
                    </li>
                    <li>
                        <label>
                            @Html.RadioButton("LineType", "gx", new {id = "rdo_gx"})
                            @Resources.ViewResource.SetupWizard_NetAccessType_GX
                        </label>
                    </li>
                </ul>
            </dd>
        </dl>
        <dl class="setup02_content_left02">
            <dt>离线数据</dt>
            <dd>
                <ul>
                    <li>
                        <label>@Html.RadioButton("LineType", "importPcap", new {id = "rdo_importPcap"})导入数据包</label></li>
                </ul>
            </dd>
        </dl>
    </div>
    <div class="setup02_content_right">
        <div class="setup02_content_right_top">
            <div class="setup02_content_right_top_pic">
                <div style="text-align: center;">
                    <img src="/Content/images/lw2.jpg" width="480" height="360" />
                </div>
            </div>
            <div class="setup02_content_right_top_content">
                <h2>
                    本设备支持多种监控方式，包括“以太网监控”、“ADSL监控”、“光纤监控”等，
                    并可以进行“离线文件导入”分析等。请根据实际监控环境，在左方选择不同的接入方式。
                </h2>
            </div>
        </div>
        <div class="setup02_content_right_bottom">
            <label id="lbl_panglu">
                @Html.RadioButton("LineMethod", "panglu", true,new {id = "rdo_panglu"})
                @Resources.ViewResource.SetupWizard_NetAccessType_PangLu
            </label>
            <label id="lbl_arp">
                @Html.RadioButton("LineMethod", "arp", new {id = "rdo_arp", disabled = "disabled" })
                @Resources.ViewResource.SetupWizard_NetAccessType_ARP
            </label>
            <label id="lbl_chuanjie">
                @Html.RadioButton("LineMethod", "chuanjie", new {id = "rdo_chuanjie", disabled = "disabled" })
                @Resources.ViewResource.SetupWizard_NetAccessType_ChuanJie
            </label>
        </div>
        <div>
            @Html.ValidationSummary()
        </div>
    </div>
    <div class="ui-helper-clearfix"></div>
    <div class="buttonsContain controlBottom">
        <ul class="rightContain">
            <li>
                <input id="btnSubmit" type="submit" value="@Resources.Resource.Button_NextStep"/>
            </li>
        </ul>
    </div>
}
@section javascript
{
    <script type="text/javascript">
        $(function() {
            $('#btnSubmit').bind('click', function() {
                if ($('input[name=LineType]:checked').size() == 0) {
                    alert('请选择线路类型');
                    return false;
                }
                if (!$('#rdo_importPcap').is(':checked') && $('input[name=LineMethod]:checked').size() == 0) {
                    alert('请选择线路类型');
                    return false;
                }
                return true;
            });
            $('.setup02_content_left,.setup02_content_right_bottom').find(':radio').bind('change', lineTypeChange);
            lineTypeChange();
        });

        function lineTypeChange() {
            var $lineType = $('.setup02_content_left :radio:checked'),
                $lineMethod = $('.setup02_content_right_bottom :radio:checked');
            if ($lineType.size() == 0 || $lineMethod.size() == 0)
                return;
            var lineType = $lineType.val(),
                lineMethod = $lineMethod.val();
            $.ajax({
                url: '@Url.Action("LoadNetTypeTip")',
                type: 'post',
                dataType: 'html',
                cache: true,
                data: { lineType: lineType, lineMethod: lineMethod },
                success: function(html) {
                    if (!html) {
                        lineTypeChange();
                        return;
                    }
                    $('.setup02_content_right_top').html(html);
                }
            });
            
            switch (lineType) {
                case 'adsl':
                    $('.setup02_content_right_bottom label').show();
                    $('#lbl_arp,#lbl_chuanjie').hide();
                    break;
                case 'importPcap':
                    $('#lbl_panglu,#lbl_arp,#lbl_chuanjie').hide();
                    break;
                case 'gx':
                    $('.setup02_content_right_bottom label').show();
                    $('#lbl_chuanjie').hide();
                    break;
                default:
                    $('.setup02_content_right_bottom label').show();
                    break;
            }
        }
    </script>
}
